<template>
	<view class="container container24934">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column">
			<image src="/static/global/cat.jpg" class="response diygw-col-24" mode="widthFix"></image>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
			<view class="flex diygw-col-24 items-center flex-nowrap flex2-clz">
				<view class="diygw-col-9 text-clz"> {{ datarows.petName }} </view>
				<view class="flex diygw-col-4">
					<view class="diygw-avatar xs radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" v-bind:src="sexChoose(datarows.sex)">|
						</image>
					</view>
				</view>
				<view class="diygw-col-24"> {{ datarows.age }}岁 </view>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap flex3-clz">
				<view class="flex diygw-col-2">
					<view class="diygw-avatar xs radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/address.png"></image>
					</view>
				</view>
				<view class="diygw-col-24"> {{ datarows.address }} </view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
				<u-form-item class="diygw-col-24" label="" labelPosition="top" prop="textarea">
					<u-input maxlength="200" height="60px" class="text144-clz" placeholder="请输入提示信息" v-model="textarea"
						type="textarea" :readonly="true"></u-input>
				</u-form-item>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap flex5-clz">
				<view v-if="tags[0]==1" class="flex diygw-col-6">
					<view class="diygw-avatar lg radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/global/1.png"></image>
					</view>
				</view>
				<view v-if="tags[1]==1" class="flex diygw-col-6">
					<view class="diygw-avatar lg radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/global/2.png"></image>
					</view>
				</view>
				<view v-if="tags[2]==1" class="flex diygw-col-6">
					<view class="diygw-avatar lg radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/global/3.png"></image>
					</view>
				</view>
				<view v-if="tags[3]==1" class="flex diygw-col-6">
					<view class="flex diygw-col-7">
						<view class="diygw-avatar xs radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/global/4.png"></image>
						</view>
					</view>
					<view class="diygw-col-12 text5-clz"> 免费 </view>
				</view>
			</view>
			<view class="flex diygw-col-24 flex-nowrap flex6-clz">
				<view class="flex flex-wrap diygw-col-12 flex-direction-column justify-center items-center">
					<view v-if="isContain(datarows.adoptCondition,'1')" class="diygw-col-20 text13-clz"> ✔ 仅限同城 </view>
					<view v-if="isContain(datarows.adoptCondition,'3')" class="diygw-col-20 text15-clz"> ✔ 适龄绝育 </view>
					<view v-if="isContain(datarows.adoptCondition,'5')" class="diygw-col-20 text11-clz"> ✔ 科学养宠，办理狗证
					</view>
					<view v-if="isContain(datarows.adoptCondition,'7')" class="diygw-col-20 text14-clz"> ✔ 签领养协议 </view>
					<view v-if="isContain(datarows.adoptCondition,'9')" class="diygw-col-20 text10-clz"> ✔ 有稳定收入 </view>
				</view>
				<view class="flex flex-wrap diygw-col-12 flex-direction-column justify-center items-center">
					<view v-if="isContain(datarows.adoptCondition,'2')" class="diygw-col-20 text16-clz"> ✔ 按时打疫苗 </view>
					<view v-if="isContain(datarows.adoptCondition,'4')" class="diygw-col-20 text17-clz"> ✔ 遛狗拴绳，养猫封网
					</view>
					<view v-if="isContain(datarows.adoptCondition,'6')" class="diygw-col-20 text19-clz"> ✔ 打卡反馈 </view>
					<view v-if="isContain(datarows.adoptCondition,'8')" class="diygw-col-20 text18-clz"> ✔ 全家同意 </view>
					<view v-if="isContain(datarows.adoptCondition,'10')" class="diygw-col-20 text20-clz"> ✔
						不得遗弃，转让，贩卖，繁殖，虐待 </view>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex7-clz">
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex8-clz">
				<view class="diygw-col-24 text3-clz"> 送养人信息 </view>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap flex9-clz">
				<view class="flex diygw-col-4">
					<view class="diygw-avatar radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/avatar.png"></image>
					</view>
				</view>
				<view class="diygw-col-9 text4-clz"> {{ datarows.name }} </view>

				<view class="flex diygw-col-2" @click="copyRight(datarows.phone)">
					<view class="diygw-avatar xs radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/phone.png"></image>
					</view>
				</view>
				<view class="diygw-col-3" @click="copyRight(datarows.phone)"> 电话 </view>
				<view class="flex diygw-col-2" @click="copyRight(datarows.vx)">
					<view class="diygw-avatar xs radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/weixin.png"></image>
					</view>
				</view>
				<view class="diygw-col-4" @click="copyRight(datarows.vx)"> 微信 </view>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap flex10-clz">
				<view class="flex flex-wrap diygw-col-12 flex-direction-column justify-center items-center flex11-clz">
					<view class="diygw-col-5 text9-clz"> 123 </view>
					<view class="diygw-col-7 text8-clz"> 待送养 </view>
				</view>
				<view class="flex flex-wrap diygw-col-12 flex-direction-column justify-center items-center flex13-clz">
					<view class="diygw-col-5 text7-clz"> 100% </view>
					<view class="diygw-col-10 text12-clz"> 私信回复率 </view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex14-clz">
				<image src="/static/action1.jpg" class="response diygw-col-24" mode="widthFix" @tap="navigateTo"
					data-id="modal" data-type="openmodal"></image>
			</view>
		</view>
		<view class="diygw-modal basic" :class="modal" style="z-index: 100000">
			<view class="diygw-dialog diygw-dialog-modal basis-lg">
				<view class="justify-end diygw-bar">
					<view class="content"> 长按识别添加 </view>
					<view class="action" data-type="closemodal" data-id="modal" @tap="navigateTo">
						<i class="diy-icon-close"></i>
					</view>
				</view>
				<view>
					<image mode="aspectFit" class="" src="/static/user/wxjwh.jpg"></image>
				</view>
			</view>
		</view>
		<view class="flex diygw-col-24 diygw-bottom">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar" style="">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/collect.png"></image>
						</view>
						
						<view class="diygw-grid-title"> 收藏 </view>
					</view>
				</button>

				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view v-if="!isExist" class="flex diygw-col-18">
							<button class="diygw-btn orange radius-xl flex-sub margin-xs button-button-clz" @click="talkTo()">私信</button>
						</view>
						<view v-if="isExist" class="flex diygw-col-18">
							<button class="diygw-btn diygw-line-orange radius-xl flex-sub margin-xs button-button-clz">已私信</button>
						</view>
						<!-- <view class="diygw-grid-title"> 菜单三 </view> -->
					</view>
				</button>
			</view>
		</view>

		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				textarea: '',
				id: '',
				datarows: {},
				tags: [],
				modal: '',
				isExist:'',
				collect:0
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}
			this.id = option.id
			this.init();
		},
		methods: {
			async init() {
				this.resultApi()
				this.isCheck()
			},
			async resultApi() {
				const id = this.id
				const http_url = '/pet/' + id
				const result = await this.$http.get(http_url)
				const data = result.data;
				console.log(data)
				this.datarows = data;
				this.textarea = data.remark
				const publish_data = await this.getPublisher()
				this.datarows['vx'] = publish_data.vx
				this.datarows['address'] = publish_data.address
				this.datarows['phone'] = publish_data.phone
				this.datarows['name'] = publish_data.name
				const tags = data.tags
				this.tags = this.convertToBinary(tags);

			},
			async getPublisher() {
				const id = this.id
				const http_url = '/pet/getPublisher/' + id
				const result = await this.$http.get(http_url)
				const data = result.data
				return data
			},
			sexChoose(sex) {
				if (sex == '男') {
					return "/static/global/male.png"
				} else if (sex == '女') {
					return "/static/global/female.png"
				}
			},
			copyRight(params) {
				uni.setClipboardData({
					data: params,
					success() {
						uni.showToast({
							title: "复制成功",
							icon: "success"
						});
					}
				});
			},
			isContain(str, index) {
				if (typeof str === 'undefined') {
					return false; // 或返回其他默认值
				}
				const arr = str.split(",")
				const hasNumberOne = arr.includes(index);
				return hasNumberOne
			},
			convertToBinary(tags) {
				var binaryString = tags.toString(2); // 将数字转换为二进制字符串
				while (binaryString.length < 4) {
					binaryString = '0' + binaryString; // 在字符串前面添加零
				}
				const binaryArray = binaryString.split('').map(Number); // 将二进制字符串拆分为单个字符数组，并转换为数字数组
				return binaryArray
			},
			talkTo(){
				const token = uni.getStorageSync('token')
				console.log(token)
				if(token){
					this.message(token)
				}else{
					uni.showToast({
						title: '请先登录',
						icon: 'error',
						duration: 2000
					});
					uni.switchTab({
						url:'/pages/user/index'
					})
				}
			},
			async isCheck(){
				const token = uni.getStorageSync('token')
				const data={
					"orderId":this.id
				}
				const header={
					"Token":token
				}
				const http_url = '/orderUser/check' 
				const result =await this.$http.get(http_url,data,header)
				const isExist = result.data
				if(isExist){
					this.isExist="true"
				}
			},
			async message(token){
				const http_url = '/orderUser'
				const data={
					"orderId":this.id,
					"status":2,
					"type":"adopt"
				}
				
				console.log(token)
				const header={
					'content-type': 'application/json;charset=UTF-8',
					"Token":token
				}
				const result = await this.$http.post(http_url,data,header)
				console.log(result)
				const code = result.code;
				console.log(code)
				if(code==200){
					uni.showToast({
						title: '已私信',
						icon: 'success',
						duration: 2000
					});
				}
			}
		},
		onPullDownRefresh() {
			this.init()
		},
	};
</script>

<style lang="scss" scoped>
	.flex1-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 20rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding-right: 10rpx;
	}

	.flex2-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text-clz {
		font-weight: bold;
		font-size: 38rpx !important;
	}

	.flex3-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex4-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex5-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex6-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex7-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 20rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 20rpx;
		margin-right: 0rpx;
		margin-left: 0rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 0rpx - 0rpx) !important;
		border-top-left-radius: 20rpx;
		margin-top: 20rpx;
		border-bottom-right-radius: 20rpx;
		margin-bottom: 0rpx;
		padding-right: 10rpx;
	}

	.flex8-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text3-clz {
		font-weight: bold;
		font-size: 32rpx !important;
	}

	.flex9-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text4-clz {
		font-weight: bold;
	}

	.flex10-clz {
		margin-left: 10rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 10rpx - 10rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex11-clz {
		background-color: #e9e9e9;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 0rpx;
		border-bottom-right-radius: 0rpx;
	}

	.text9-clz {
		margin-left: 10rpx;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text8-clz {
		margin-left: 10rpx;
		width: calc(41.6666666667% - 10rpx - 10rpx) !important;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex12-clz {
		background-color: #e9e9e9;
	}

	.text13-clz {
		margin-left: 10rpx;
		width: calc(83.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text15-clz {
		margin-left: 10rpx;
		width: calc(83.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text11-clz {
		margin-left: 10rpx;
		width: calc(83.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text14-clz {
		margin-left: 10rpx;
		width: calc(83.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text10-clz {
		margin-left: 10rpx;
		width: calc(83.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text16-clz {
		margin-left: 10rpx;
		width: calc(83.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text17-clz {
		margin-left: 10rpx;
		width: calc(83.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text19-clz {
		margin-left: 10rpx;
		width: calc(83.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text18-clz {
		margin-left: 10rpx;
		width: calc(83.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text20-clz {
		margin-left: 10rpx;
		width: calc(83.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex13-clz {
		background-color: #e9e9e9;
		border-bottom-left-radius: 0rpx;
		overflow: hidden;
		border-top-left-radius: 0rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
	}

	.text7-clz {
		margin-left: 10rpx;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text12-clz {
		margin-left: 10rpx;
		width: calc(62.5% - 10rpx - 10rpx) !important;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}


	.text144-clz {
		font-size: 28rpx !important;
	}

	.flex14-clz {
		margin-left: 10rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 10rpx - 10rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text5-clz {
		color: #8048c0;
		font-weight: bold;
		font-size: 29rpx !important;
	}

	.container24934 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.container24934 {
		padding-bottom: 80px;
	}
</style>